<template>
  <a-spin :spinning="spinning">
    <div ref="chartRef" :style="{ height, width }"></div>
  </a-spin>
</template>
<script lang="ts">
  import { basicProps } from './props';
</script>
<script lang="ts" setup>
  import { onMounted, ref, Ref } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  import { flowtrend } from '/@/api/sys/gateway/gateway';
  import moment from 'moment';
  defineProps({
    ...basicProps,
  });
  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
  const spinning = ref<boolean>(false);
  onMounted(() => {
    spinning.value = true;
    flowtrend().then((res) => {
      let data = res;
      let x = [];
      data.x.map((item) => {
        x.push(moment(parseInt(item) * 1000).format('HH:mm'));
      });
      data.x = x;
      spinning.value = false;
      setOptions({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              width: 1,
              color: '#2E6BFF',
            },
          },
          formatter: (params) => {
            let html = '';
            for (let i in params) {
              const param = params[i];
              console.log(param);
              html += `<span style='display:inline-block;color:'rgba(58,56,55,0.64)';font-size:14px;'>${param.axisValue}</span><br />`;
              html += `<span style="display:inline-block;color: #3A3837;margin-left:1px;font-size:18px;margin-top:4px;font-weight:bold">${param.value}</span><br />`;
            }
            return html;
          },
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: data.x,
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#585756', //坐标值得具体的颜色
              fontSize: '12px',
            },
          },
        },

        yAxis: [
          {
            type: 'value',
            splitNumber: 4,
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed', //设置网格线类型 dotted：虚线 solid:实线
                color: '#F2F2F2',
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#585756', //坐标值得具体的颜色
                fontSize: '12px',
              },
            },
          },
        ],
        grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
        series: [
          {
            smooth: true,
            showSymbol: false,
            symbolSize: 12,
            data: data.y,
            type: 'line',
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#6699FF',
                  },
                  // {
                  //   offset: 0.4,
                  //   color: '#6699FF',
                  // },

                  {
                    offset: 0.6,
                    color: '#F5F8FF',
                  },
                ],
              },
              origin: 'start',
            },
          },
        ],
      });
    });
  });
</script>
